<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>兽楓桦星官网 - 主页</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="/vendor/bootstrap/css/bootstrap.min.css">
    <!-- Custom Font Icons CSS-->
    <link rel="stylesheet" href="/css/landy-iconfont.css">
    <!-- Google fonts - Open Sans-->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800">
    <!-- owl carousel-->
    <link rel="stylesheet" href="vendor/owl.carousel/assets/owl.carousel.css">
    <link rel="stylesheet" href="vendor/owl.carousel/assets/owl.theme.default.css">
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="/css/style.css" id="theme-stylesheet">
    <!-- Custom stylesheet-->
    <link rel="stylesheet" href="/css/custom.css">
    <!-- Favicon-->
    <link rel="shortcut icon" href="/img/logo/DFGG LOGO2.0.jpg">
    <!-- animate.css -->
    <link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
</head>

<body>
    <!-- 导航栏 -->
    <header class="header">
        <nav class="navbar navbar-expand-lg fixed-top">
            <img class="logo" src="img/logo/azaib-fpo2s.png" alt="">
            <a href="index.html" class="navbar-brand">兽楓桦星服务器</a>
            <button type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"
                class="navbar-toggler navbar-toggler-right">
                <span></span>
                <span></span>
                <span></span>
            </button>
            <div id="navbarSupportedContent" class="collapse navbar-collapse">
                <ul class="navbar-nav ml-auto align-items-start align-items-lg-center">
                    <li class="nav-item">
                        <a href="#welcome" class="nav-link link-scroll"><i class="fas fa-home"></i>首页</a>
                    </li>
                    <li class="nav-item">
                        <a href="#game-play" class="nav-link link-scroll"><i class="fas fa-gamepad"></i>玩法</a>
                    </li>
                    <li class="nav-item">
                        <a href="#about-us" class="nav-link link-scroll"><i class="fas fa-info"></i>关于我们</a>
                    </li>
                    <li class="nav-item">
                        <a href="#notice" class="nav-link link-scroll"><i class="fas fa-newspaper"></i>服务器公告</a>
                    </li>
                    <li class="nav-item">
                        <a href="#comments" class="nav-link link-scroll"><i class="fas fa-comments"></i>玩家评论</a>
                    </li>
                    <li class="nav-item">
                        <a href="#friends" class="nav-link link-scroll"><i class="fas fa-user-friends"></i>友链</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button"
                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fas fa-link" aria-hidden="true"></i>其他
                        </a>
                        <div class="dropdown-menu dropdown-menu-right animate__animated"
                            aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="/page/sponsored-list.html">赞助名单</a>
                            <a class="dropdown-item" href="/page/server-history.html">服务器历史</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" mdui-dialog="{target: '#music-player-settings'}">音乐播放器设置</a>
                        </div>
                    </li>
                </ul>
            </div>
        </nav>
    </header>


    <section id="welcome" class="welcome welcome-home">
        <div class="container">
            <div class="row d-flex">
                <div class="col-lg-6 text order-2 order-lg-1">
                    <h1>欢迎来到 - 兽楓桦星服务器官网</h1>
                    <p class="welcome-text">
                        欢迎来到兽咔之星,这是一个生存的服务器!
                    </p>
                    <div class="CTA">
                        <a href="#game-play" class="btn btn-primary btn-shadow btn-gradient link-scroll">
                            开始了解！
                        </a>
                        <a href="https://qm.qq.com/cgi-bin/qm/qr?k=datlFG3iLaerK83nV-KKxx8iuMfW4K1_&jump_from=webapi&authKey=icSUtRlCrVjFdnyGghuWuJyc6blPL051ln7iI1JH+13pj0FQ7ltSOu/Ddzh/nWmT" target="_blank" class="btn btn-outline-primary">
                            立即加入我们
                        </a>
                    </div>
                </div>
                <div class="col-lg-6 order-1 order-lg-2">
                    <iframe style="width: 100%; height: 100%;"
                        src="//player.bilibili.com/player.html?aid=1352146776&bvid=BV1az421Z7Jx&cid=1480485601&p=1"
                        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
                </div>
            </div>
        </div>
    </section>

    <section id="game-play" class="game-play bg-gray">
        <div class="container">
            <div class="row d-flex justify-content-center">
                <div class="col-lg-8 text-center">
                    <h2 class="h3 mb-5"><i class="fas fa-solid fa-earth-americas"></i>多地图玩法 | 总有一个是您喜欢的！</h2>
                    <div class="game-play-mockup">
                        <div id="nav-tabContent" class="tab-content">
                            <div id="nav-first" role="tabpanel" aria-labelledby="nav-first-tab"
                                class="tab-pane fade show active">
                                <img src="/img/server-photo/game-play/生存建筑.png" alt="生存建筑" title="生存建筑"
                                    class="img-fluid">
                            </div>
                            <div id="nav-second" role="tabpanel" aria-labelledby="nav-second-tab" class="tab-pane fade">
                                <img src="img/server-photo/game-play/插件生存.png" alt="插件生存" title="插件生存"
                                    class="img-fluid">
                            </div>
                            <div id="nav-third" role="tabpanel" aria-labelledby="nav-third-tab" class="tab-pane fade">
                                <img src="img/server-photo/game-play/空岛生存.png" alt="..." class="img-fluid">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div role="tablist" class="nav nav-tabs">
                <div class="row">
                    <div class="col-md-4">
                        <a id="nav-first-tab" data-toggle="tab" href="#nav-first" role="tab" aria-controls="nav-first"
                            aria-expanded="true" class="nav-item nav-link active">
                            <span class="number">1</span>生存建筑世界 - 探索创造与建设乐趣
                        </a>
                    </div>
                    <div class="col-md-4">
                        <a id="nav-second-tab" data-toggle="tab" href="#nav-second" role="tab"
                            aria-controls="nav-second" class="nav-item nav-link">
                            <span class="number">2</span>插件生存世界 - 体验多样化游戏玩法
                        </a>
                    </div>
                    <div class="col-md-4">
                        <a id="nav-third-tab" data-toggle="tab" href="#nav-third" role="tab" aria-controls="nav-third"
                            class="nav-item nav-link">
                            <span class="number">3</span>空岛生存世界 - 挑战高空孤岛生存模式
                        </a>
                    </div>
                    <div class="col-md-12 text-center mt-4">
                        <a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=datlFG3iLaerK83nV-KKxx8iuMfW4K1_&jump_from=webapi&authKey=icSUtRlCrVjFdnyGghuWuJyc6blPL051ln7iI1JH+13pj0FQ7ltSOu/Ddzh/nWmT"><i
                                class="fa fa-solid fa-right-to-bracket"></i>更多请加入QQ群</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="about-us" class="about-us">
        <div class="container">
            <h2>关于我们</h2>
            <div class="row">
                <p class="lead col-lg-10">
                    这是一个纯生存的服务器!无论是休闲养生还是激烈竞技都可以在这里进行.
                    <br>
                    甚至可以带上你的朋友加入我们.
                </p>
                <p class="lead col-lg-10">
                    <img src="img/不觉得很酷吗.jpg" alt="不觉得很酷吗.jpg" title="不觉得很酷吗.jpg" class="img-fluid rounded">
                </p>
            </div>
            <a href="https://qm.qq.com/cgi-bin/qm/qr?k=datlFG3iLaerK83nV-KKxx8iuMfW4K1_&jump_from=webapi&authKey=icSUtRlCrVjFdnyGghuWuJyc6blPL051ln7iI1JH+13pj0FQ7ltSOu/Ddzh/nWmT" target="_blank"
                class="btn btn-primary btn-shadow btn-gradient">了解更多！</a>
        </div>
    </section>

    <section id="notice" class="server-notice bg-gray">
        <div class="container">
            <h2 class="mb-5 text-center">公告 | 最新活动与更新</h2>
            <p class="text-center">获取服内实时动态！</p>
        </div>
    </section>

    <section id="comments" class="player-comments">
        <div class="container">
            <header class="text-center no-margin-bottom">
                <h2>玩家评论</h2>
                <p class="lead">
                    欢迎阅读玩家们对我们游戏的热情评论，玩家们对游戏的喜爱与建议是我们不断进步的动力。
                </p>
            </header>
            <div class="owl-carousel owl-theme player-comments-container"></div>
        </div>
    </section>

    <section id="friends" class="friends bg-primary">
        <div class="container text-center">
            <header>
                <h2> 友情链接 </h2>
                <div class="row">
                    <p class="lead col-lg-8 mx-auto">
                        支持我们共同的理想!
                    </p>
                </div>
            </header>
            <div class="grid row"></div>
        </div>
    </section>

    
    <div id="scrollTop">
        <div class="d-flex align-items-center justify-content-end">
            <i class="fa-solid fa-arrow-up-long"></i>返回顶部
        </div>
    </div>
    <div id="music-player-container"></div>
    <div id="footer"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://kit.fontawesome.com/deb46094a2.js" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"> </script>
    <script src="/vendor/bootstrap/js/bootstrap.min.js"></script>
    <script src="/vendor/owl.carousel/owl.carousel.min.js"></script>
    <script src="/js/index.js"></script>
    <script src="/js/musicPlayer/mian.js"></script>
    <script src="/js/front.js"></script>
    <script>
        $("#footer").load('/common/footer.html');

        const musicPlayer = new MusicPlayerSettings();
        musicPlayer.mian();
    </script>
</body>

</html>
